import React, { useState, useEffect, useImperativeHandle } from "react"
import classNames from "classnames"
import { Overlay } from "@nutui/nutui-react-taro"
import { Image } from "@tarojs/components"
import styles from './index.module.less'

type SeatWarningToastPropsType = {}
export type SeatWarningToastRefType = {
  show: () => void
}
const noticeImg = 'https://fulu-media.oss-cn-hangzhou.aliyuncs.com/public/icon/oxo.ef5bef87.gif'

const SeatWarningToast: React.ForwardRefRenderFunction<SeatWarningToastPropsType, SeatWarningToastPropsType> = (_props, ref) => {
  const [showToast, setShowToast] = useState(false)

  useImperativeHandle(ref, () => {
    return {
      show: () => setShowToast(true)
    }
  }, [])

  useEffect(() => {
    let timmer: NodeJS.Timeout
    if (showToast) { 
      timmer = setTimeout(() => {
        setShowToast(false)
      }, 2000)
    }
    return () => {
      timmer && clearTimeout(timmer)
    }
  }, [showToast])

  return (
    <div className={classNames(styles.toastWrapper, { [styles.hidden]: !showToast })}>
      <Overlay visible >
        <div className={styles.contentWrapper}>
          <div className={styles.contentItem}>
            <Image className={styles.noticeImg} src={noticeImg} />
            <div className={styles.noticeTxt}>座位旁边不要留空</div>
          </div>
        </div>
      </Overlay>
    </div>
  ) 
}
 
export default React.forwardRef<SeatWarningToastRefType, SeatWarningToastPropsType>(SeatWarningToast)